<!-- 声明这是一个 JSP 页面，使用 Java 语言，导入 java.util 包下的所有类，页面编码格式为 utf-8。 -->
<%@ page language="java"  import="java.util.*"   pageEncoding="utf-8"%> 

<!-- 指定页面遵循的 HTML 文档类型为 W3C 的 HTML 4.01 过渡版规范。 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!-- 导入自定义的商品实体类 cn.estore.entity.ProductEntity和商品数据访问类 cn.estore.dao.ProductDao。 -->
<%@ page import="cn.estore.entity.ProductEntity"%> 
<%@ page import="cn.estore.dao.ProductDao"%> 

<html>
<head>

<!-- 设置页面的 MIME 类型为文本 /html，字符编码为 utf-8（确保中文正常显示）。 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>estore</title>
</head>

<!-- 定义 HTML 文档的可见内容区域（页面主体）。 -->
<body>

<!-- 创建一个无边框（border="0"）表格，宽度固定为 1024 像素，页面居中对齐（align="center"）。 -->
<table border="0" width="1024" align="center">
 
 <!-- <tr>：表格的第一行，用于放置页面顶部内容。
单元格跨两列（colspan="2"），因为表格后续分为两列，这里通过跨列使顶部内容占满整个表格宽度。
引入外部 JSP 文件/pages/Common/head.jsp（通常包含网站标题、导航栏等公共顶部内容），flush="true"表示缓冲区满时自动刷新输出。 -->
  <tr>
  <!-- 顶部 -->
   <td colspan="2">
      <jsp:include page="/pages/common/head.jsp" flush="true"/>
   </td>
  </tr>
    
    <!-- 将页面分为左右两栏，左侧放导航 / 分类，右侧放主要内容（如商品列表、详情等），布局清晰且易于维护。 -->
   <tr>
   <!--左侧单元格，宽度 300 像素，背景色为浅灰色（#F5F5F5），内容顶部对齐。
引入left.jsp（通常包含侧边栏菜单、分类导航等），实现左侧公共内容的复用。 -->
    <td width="300" bgcolor="#F5F5F5" valign="top">
      <!-- 左侧 -->
      <jsp:include page="/pages/common/left.jsp" flush="true"/>
    </td>
    
    <!-- 右侧主内容区：右侧单元格，宽度 724 像素（300+724=1024，与表格总宽度一致），背景色为白色，内容顶部对齐，整体居中对齐（align="center"）。
内部包含一个左对齐的<div>，并插入一张图片（fg_right03.jpg），作为右侧主内容区的头部装饰或标识。 -->
    <td width="724" align="center" valign="top" bgcolor="#FFFFFF">
      <!-- 右侧 -->
      <div align="left">
        <img src="/estore/images/systemImages/fg_right03.jpg">
      </div>
      <!-- 显示商品 -->
 
<%
ProductDao dao=new ProductDao();//创建商品数据访问类（ProductDao）的实例，命名为 dao。
List ProductList=(List)dao.selectAllProducts();//将查询结果存入List类的对象ProductList

for(int i=0;i<ProductList.size();i++){
ProductEntity e=(ProductEntity)ProductList.get(i);//遍历结果集
%>

<!-- 创建一个表格，宽度为 95%，高度为 136 像素，边框为 1 像素，居中显示，单元格内边距为 1 像素，单元格间距为 1 像素，边框颜色为白色，背景色为灰色。 -->
<table width="95%" height="136" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#999999">
  <tr>
  
  <!-- 定义一个表格单元格，宽度占 40%，高度 80 像素，跨 5 行显示，背景色为白色。 -->
    <td width="40%" height="80" rowspan="5" bgcolor="#FFFFFF">
      
      <!--创建一个块级容器，内容居中对齐。插入一张图片，图片路径由 “/estore/images/productImages/” 
      与商品实体 e 的图片名称（通过 e.getPicture () 获取）拼接而成，图片宽度 110 像素，高度 100 像素。 
      强调:存放图片的文件夹必须放在WebContent文件夹中-->
      <div align="center">
        <img src="<%="/estore/images/productImages/"+e.getPicture()%>" width="110" height="100"/>
      </div>
      
    </td>
    
    <!-- 定义一个表格单元格，宽度占 59%，背景色为白色。
    创建左对齐的块级容器，显示 商品的名称、单价、简介。-->
    <td width="59%" bgcolor="#FFFFFF">  
      <div align="left">商品:<%=e.getName()%></div>
      <div align="left">单价:<%=e.getMarketPrice()%>元</div>
      <div align="left">简介:<%=e.getDescription()%></div>
      <div align="left">
      <%
      //检查session中是否有用户信息(user或id存在即视为已登录)
      if(session.getAttribute("user")!=null||session.getAttribute("id")!=null){
      %>
      <a href="#" onclick="window.open('showProductById.jsp?id=<%=e.getId()%>','','width=1000,height=500');">查看商品详情</a>
      <%
      }else{
      %>
      登录才能购买
      <%
      }
      %>
      </div>
      
    </td>
</tr>
</table>
<%
}
%>
</td>   
    </tr> 
  
 <!-- 这行代码是表格布局中底部区域的核心定义，通过跨列单元格和动态包含标签，实现了底部公共内容的复用和统一管理 -->  
    <tr>
      <!-- 底部 -->
      <td colspan="2">
     <jsp:include page="/pages/common/statusBarNavigation.jsp" flush="true"/>
      </td>
    </tr>
   </table> 
   <br>
</body>
</html>